<template>
    <transition name="modal-animation">
        <div class="modal" v-if="isClose">
            <div class="modal-head">
                <div class="modal-name">{{title}}</div>
                <svg-icon icon="close" @click="closeModal"></svg-icon>
            </div>
            <div class="modal-main">
                <slot></slot>
                <div class="slot"></div>
            </div>
        </div>
    </transition>
</template>

<script setup>
// import { defineEmits } from 'vue';
const props = defineProps({
    title: {
        default: '标题'
    },
    isClose: {
        default: false
    }
})

const emit = defineEmits(['close'])
const closeModal = () => {
    emit('close', '关闭弹出层')
}

</script>

<style lang="less" scoped>
.modal-animation {

    // 入场
    &-enter {
        &-from {
            transform: translateX(360px);
        }

        &-active {
            transition: all 0.2s ease-out;
        }

        &-to {
            transform: translateX(0);
        }
    }

    // 出场
    &-leave {
        &-from {
            transform: translateX(0);
        }

        &-active {
            transition: all 0.2s ease-in;
        }

        &-to {
            transform: translateX(360px);
        }
    }
}

.modal {
    width: 360px;
    height: 100%;
    position: fixed;
    right: 0;
    top: 52px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.80);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(20px);
    // padding: @padding-20;

    .modal-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // padding-bottom: @padding-20;
        padding: 20px;
        box-sizing: border-box;

        .modal-name {
            font-size: @font-16;
            color: @gray-0;
            font-weight: 600;
        }

        .svg-icon {
            color: @gray-2;
            cursor: pointer;
            padding-left: 8px;
            font-size: @font-16;
        }
    }

    .modal-main {
        height: 80%;
        overflow-y: auto;
        margin: 2px;
        padding-bottom: 116px;

        // .slot {
        // height: 600px;
        // }

        &::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        &::-webkit-scrollbar-track {
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0);
        }

        /*定义滑块 内阴影+圆角*/
        &::-webkit-scrollbar-thumb {
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.2);
        }


    }
}
</style>